<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>舞动健康 - 我的服务</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入FontAwesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: {
                            light: '#ff7eb3',
                            DEFAULT: '#d44bdf',
                            dark: '#a742df',
                        }
                    },
                    fontFamily: {
                        sans: ['-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif']
                    },
                }
            }
        }
    </script>
    <style>
        .gradient-bg {
            background: linear-gradient(135deg, #a742df 0%, #ff7eb3 100%);
        }
        
        .gradient-text {
            background: linear-gradient(135deg, #a742df 0%, #ff7eb3 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        .no-scrollbar::-webkit-scrollbar {
            display: none;
        }
        
        .no-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
    </style>
</head>
<body class="font-sans bg-gray-50 text-gray-800 max-w-md mx-auto min-h-screen pb-16">
    <!-- 顶部导航 -->
    <header class="fixed top-0 left-0 right-0 z-20 max-w-md mx-auto">
        <div class="gradient-bg px-4 py-3 text-white">
            <div class="flex items-center justify-center relative">
                <button class="absolute left-0 w-10 h-10 flex items-center justify-center" onclick="window.location.href='my.html'">
                    <i class="fa-solid fa-arrow-left"></i>
                </button>
                <div class="text-lg font-medium">我的服务</div>
            </div>
        </div>
        
        <!-- 标签导航 -->
        <div class="bg-white shadow-sm">
            <div class="flex overflow-x-auto no-scrollbar">
                <button class="flex-1 py-3 text-center text-primary-dark font-medium border-b-2 border-primary-dark" onclick="switchTab('all')">
                    全部
                </button>
                <button class="flex-1 py-3 text-center text-gray-500" onclick="switchTab('waiting')">
                    待接受
                </button>
                <button class="flex-1 py-3 text-center text-gray-500" onclick="switchTab('pending')">
                    待服务
                </button>
                <button class="flex-1 py-3 text-center text-gray-500" onclick="switchTab('completed')">
                    已完成
                </button>
                <button class="flex-1 py-3 text-center text-gray-500" onclick="switchTab('cancelled')">
                    已取消
                </button>
            </div>
        </div>
    </header>
    
    <!-- 页面内容区 -->
    <main class="pt-28 px-4 space-y-4">
        <!-- 待接受状态板块 -->
        <div id="waiting-section" class="space-y-5">
            <div class="flex justify-between items-center">
                <h2 class="text-lg font-medium">待接受的预约</h2>
                <div class="text-xs text-gray-500">已选择 <span id="selected-count">0</span> 项</div>
            </div>
            
            <!-- 待接受的预约卡片 1 -->
            <div class="bg-white rounded-xl shadow-sm overflow-hidden">
                <div class="p-4 border-b border-gray-100">
                    <div class="flex justify-between items-center">
                        <div class="flex items-center">
                            <input type="checkbox" class="service-checkbox w-5 h-5 rounded text-primary-dark focus:ring-primary-dark" onchange="updateSelectedCount()">
                            <div class="ml-3">
                                <h3 class="font-medium">拉丁舞基础课程</h3>
                                <div class="flex items-center mt-1">
                                    <span class="text-xs px-2 py-0.5 bg-purple-100 text-primary-dark rounded-full">舞蹈</span>
                                </div>
                            </div>
                        </div>
                        <div class="text-primary-dark text-sm font-medium">
                            待接受
                        </div>
                    </div>
                </div>
                
                <div class="p-4">
                    <div class="grid grid-cols-2 gap-3 text-sm">
                        <div class="flex items-center">
                            <i class="fa-regular fa-clock text-gray-400 mr-2"></i>
                            <span>60分钟 / 次</span>
                        </div>
                        <div class="flex items-center">
                            <i class="fa-solid fa-location-dot text-gray-400 mr-2"></i>
                            <span>线下场地</span>
                        </div>
                        <div class="flex items-center">
                            <i class="fa-regular fa-calendar text-gray-400 mr-2"></i>
                            <span>6月15日 周一</span>
                        </div>
                        <div class="flex items-center">
                            <i class="fa-regular fa-clock text-gray-400 mr-2"></i>
                            <span>09:00-10:00</span>
                        </div>
                    </div>
                    <div class="mt-3 text-xs text-gray-500">
                        <div>需求：希望学习基本拉丁舞步，没有任何舞蹈基础，需要教练耐心指导。</div>
                    </div>
                </div>
                
                <div class="bg-gray-50 p-4 flex justify-between items-center">
                    <div class="text-primary-dark font-bold">¥350.00</div>
                    <div class="space-x-2">
                        <button class="px-4 py-1.5 border border-gray-300 rounded-full text-sm text-gray-600">
                            取消预约
                        </button>
                        <button class="px-4 py-1.5 gradient-bg text-white rounded-full text-sm" onclick="document.getElementById('nearby-coaches-1').classList.toggle('hidden')">
                            查看教练
                        </button>
                    </div>
                </div>
                
                <!-- 附近教练列表（默认隐藏） -->
                <div id="nearby-coaches-1" class="hidden border-t border-gray-200">
                    <div class="p-3 bg-gray-50 text-sm font-medium border-b border-gray-200">
                        附近教练推荐
                    </div>
                    
                    <!-- 教练列表 -->
                    <div class="divide-y divide-gray-100">
                        <!-- 教练1 -->
                        <div class="p-3 flex justify-between items-center">
                            <div class="flex items-center">
                                <div class="w-10 h-10 rounded-full overflow-hidden">
                                    <img src="https://images.unsplash.com/photo-1534308143481-c55f00be8bd7?q=80&w=100&auto=format&fit=crop" 
                                         alt="教练头像" class="w-full h-full object-cover">
                                </div>
                                <div class="ml-3">
                                    <div class="font-medium">王教练</div>
                                    <div class="flex items-center text-xs text-gray-500">
                                        <i class="fa-solid fa-star text-yellow-400 mr-1"></i>
                                        <span>4.9 · </span>
                                        <span class="ml-1">拉丁舞专业 · </span>
                                        <span class="ml-1">1.2km</span>
                                    </div>
                                </div>
                            </div>
                            <button class="px-3 py-1 text-xs border border-primary-dark text-primary-dark rounded-full">
                                邀请
                            </button>
                        </div>
                        
                        <!-- 教练2 -->
                        <div class="p-3 flex justify-between items-center">
                            <div class="flex items-center">
                                <div class="w-10 h-10 rounded-full overflow-hidden">
                                    <img src="https://images.unsplash.com/photo-1566241832378-917a0f30db2c?q=80&w=100&auto=format&fit=crop" 
                                         alt="教练头像" class="w-full h-full object-cover">
                                </div>
                                <div class="ml-3">
                                    <div class="font-medium">李教练</div>
                                    <div class="flex items-center text-xs text-gray-500">
                                        <i class="fa-solid fa-star text-yellow-400 mr-1"></i>
                                        <span>4.8 · </span>
                                        <span class="ml-1">舞蹈全能 · </span>
                                        <span class="ml-1">2.5km</span>
                                    </div>
                                </div>
                            </div>
                            <button class="px-3 py-1 text-xs border border-primary-dark text-primary-dark rounded-full">
                                邀请
                            </button>
                        </div>
                        
                        <!-- 教练3 -->
                        <div class="p-3 flex justify-between items-center">
                            <div class="flex items-center">
                                <div class="w-10 h-10 rounded-full overflow-hidden">
                                    <img src="https://images.unsplash.com/photo-1571019613576-2b22c76fd955?q=80&w=100&auto=format&fit=crop" 
                                         alt="教练头像" class="w-full h-full object-cover">
                                </div>
                                <div class="ml-3">
                                    <div class="font-medium">张教练</div>
                                    <div class="flex items-center text-xs text-gray-500">
                                        <i class="fa-solid fa-star text-yellow-400 mr-1"></i>
                                        <span>4.7 · </span>
                                        <span class="ml-1">拉丁舞冠军 · </span>
                                        <span class="ml-1">3.8km</span>
                                    </div>
                                </div>
                            </div>
                            <button class="px-3 py-1 text-xs border border-primary-dark text-primary-dark rounded-full">
                                邀请
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 待接受的预约卡片 2 -->
            <div class="bg-white rounded-xl shadow-sm overflow-hidden">
                <div class="p-4 border-b border-gray-100">
                    <div class="flex justify-between items-center">
                        <div class="flex items-center">
                            <input type="checkbox" class="service-checkbox w-5 h-5 rounded text-primary-dark focus:ring-primary-dark" onchange="updateSelectedCount()">
                            <div class="ml-3">
                                <h3 class="font-medium">健身私教指导</h3>
                                <div class="flex items-center mt-1">
                                    <span class="text-xs px-2 py-0.5 bg-purple-100 text-primary-dark rounded-full">健身</span>
                                </div>
                            </div>
                        </div>
                        <div class="text-primary-dark text-sm font-medium">
                            待接受
                        </div>
                    </div>
                </div>
                
                <div class="p-4">
                    <div class="grid grid-cols-2 gap-3 text-sm">
                        <div class="flex items-center">
                            <i class="fa-regular fa-clock text-gray-400 mr-2"></i>
                            <span>90分钟 / 次</span>
                        </div>
                        <div class="flex items-center">
                            <i class="fa-solid fa-location-dot text-gray-400 mr-2"></i>
                            <span>线下健身房</span>
                        </div>
                        <div class="flex items-center">
                            <i class="fa-regular fa-calendar text-gray-400 mr-2"></i>
                            <span>6月16日 周二</span>
                        </div>
                        <div class="flex items-center">
                            <i class="fa-regular fa-clock text-gray-400 mr-2"></i>
                            <span>18:00-19:30</span>
                        </div>
                    </div>
                    <div class="mt-3 text-xs text-gray-500">
                        <div>需求：主要想减脂增肌，有一定健身基础，需要专业教练指导练习姿势和制定计划。</div>
                    </div>
                </div>
                
                <div class="bg-gray-50 p-4 flex justify-between items-center">
                    <div class="text-primary-dark font-bold">¥280.00</div>
                    <div class="space-x-2">
                        <button class="px-4 py-1.5 border border-gray-300 rounded-full text-sm text-gray-600">
                            取消预约
                        </button>
                        <button class="px-4 py-1.5 gradient-bg text-white rounded-full text-sm" onclick="document.getElementById('nearby-coaches-2').classList.toggle('hidden')">
                            查看教练
                        </button>
                    </div>
                </div>
                
                <!-- 附近教练列表（默认隐藏） -->
                <div id="nearby-coaches-2" class="hidden border-t border-gray-200">
                    <div class="p-3 bg-gray-50 text-sm font-medium border-b border-gray-200">
                        附近教练推荐
                    </div>
                    
                    <!-- 教练列表 -->
                    <div class="divide-y divide-gray-100">
                        <!-- 教练1 -->
                        <div class="p-3 flex justify-between items-center">
                            <div class="flex items-center">
                                <div class="w-10 h-10 rounded-full overflow-hidden">
                                    <img src="https://images.unsplash.com/photo-1594381898411-846e7d193883?q=80&w=100&auto=format&fit=crop" 
                                         alt="教练头像" class="w-full h-full object-cover">
                                </div>
                                <div class="ml-3">
                                    <div class="font-medium">刘教练</div>
                                    <div class="flex items-center text-xs text-gray-500">
                                        <i class="fa-solid fa-star text-yellow-400 mr-1"></i>
                                        <span>5.0 · </span>
                                        <span class="ml-1">健身专家 · </span>
                                        <span class="ml-1">0.8km</span>
                                    </div>
                                </div>
                            </div>
                            <button class="px-3 py-1 text-xs border border-primary-dark text-primary-dark rounded-full">
                                邀请
                            </button>
                        </div>
                        
                        <!-- 教练2 -->
                        <div class="p-3 flex justify-between items-center">
                            <div class="flex items-center">
                                <div class="w-10 h-10 rounded-full overflow-hidden">
                                    <img src="https://images.unsplash.com/photo-1518611012118-696072aa579a?q=80&w=100&auto=format&fit=crop" 
                                         alt="教练头像" class="w-full h-full object-cover">
                                </div>
                                <div class="ml-3">
                                    <div class="font-medium">赵教练</div>
                                    <div class="flex items-center text-xs text-gray-500">
                                        <i class="fa-solid fa-star text-yellow-400 mr-1"></i>
                                        <span>4.9 · </span>
                                        <span class="ml-1">增肌减脂 · </span>
                                        <span class="ml-1">1.5km</span>
                                    </div>
                                </div>
                            </div>
                            <button class="px-3 py-1 text-xs border border-primary-dark text-primary-dark rounded-full">
                                邀请
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 批量邀请按钮 -->
            <div class="fixed bottom-20 left-0 right-0 z-10 px-4 max-w-md mx-auto hidden" id="batch-invite">
                <button class="w-full py-3 gradient-bg text-white rounded-lg font-medium shadow-lg">
                    批量邀请教练（<span id="batch-count">0</span>）
                </button>
            </div>
        </div>
        
        <!-- 待服务状态卡片 -->
        <div class="bg-white rounded-xl shadow-sm overflow-hidden">
            <div class="p-4 border-b border-gray-100">
                <div class="flex justify-between items-center">
                    <div class="flex items-center">
                        <div class="w-10 h-10 rounded-full overflow-hidden">
                            <img src="https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?q=80&w=300&auto=format&fit=crop"
                                 alt="教练头像" class="w-full h-full object-cover">
                        </div>
                        <div class="ml-3">
                            <h3 class="font-medium">林教练</h3>
                            <p class="text-xs text-gray-500">瑜伽课程</p>
                        </div>
                    </div>
                    <div class="text-primary-dark text-sm font-medium">
                        待服务
                    </div>
                </div>
            </div>
            
            <div class="p-4">
                <div class="flex">
                    <div class="w-20 h-20 rounded-lg bg-gray-100 overflow-hidden">
                        <img src="https://images.unsplash.com/photo-1599447421416-3414500d18a5?q=80&w=200&auto=format&fit=crop"
                             alt="服务图片" class="w-full h-full object-cover">
                    </div>
                    <div class="ml-3 flex-1">
                        <h3 class="font-medium mb-1">哈他瑜伽私教课程</h3>
                        <div class="text-xs text-gray-500 mb-2">单次 | 60分钟 | 精准体位纠正</div>
                        <div class="flex justify-between">
                            <div class="text-xs text-gray-500">
                                2023-06-08 14:00
                            </div>
                            <div class="text-primary-dark font-medium">
                                ¥300
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="bg-gray-50 p-4 flex justify-end space-x-3">
                <button class="px-4 py-1.5 border border-gray-300 rounded-full text-sm text-gray-600">
                    查看详情
                </button>
                <button class="px-4 py-1.5 gradient-bg text-white rounded-full text-sm">
                    联系教练
                </button>
            </div>
        </div>
        
        <!-- 已完成状态卡片 -->
        <div class="bg-white rounded-xl shadow-sm overflow-hidden">
            <div class="p-4 border-b border-gray-100">
                <div class="flex justify-between items-center">
                    <div class="flex items-center">
                        <div class="w-10 h-10 rounded-full overflow-hidden">
                            <img src="https://images.unsplash.com/photo-1566241832378-917a0f30db2c?q=80&w=300&auto=format&fit=crop"
                                 alt="教练头像" class="w-full h-full object-cover">
                        </div>
                        <div class="ml-3">
                            <h3 class="font-medium">王教练</h3>
                            <p class="text-xs text-gray-500">拉丁舞课程</p>
                        </div>
                    </div>
                    <div class="text-green-500 text-sm font-medium">
                        已完成
                    </div>
                </div>
            </div>
            
            <div class="p-4">
                <div class="flex">
                    <div class="w-20 h-20 rounded-lg bg-gray-100 overflow-hidden">
                        <img src="https://images.unsplash.com/photo-1534287473209-7d1a3f030423?q=80&w=200&auto=format&fit=crop"
                             alt="服务图片" class="w-full h-full object-cover">
                    </div>
                    <div class="ml-3 flex-1">
                        <h3 class="font-medium mb-1">拉丁舞基础入门课程</h3>
                        <div class="text-xs text-gray-500 mb-2">单次 | 120分钟 | 包含4支舞种</div>
                        <div class="flex justify-between">
                            <div class="text-xs text-gray-500">
                                2023-06-05 19:00
                            </div>
                            <div class="text-primary-dark font-medium">
                                ¥320
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="bg-gray-50 p-4 flex justify-end space-x-3">
                <button class="px-4 py-1.5 border border-gray-300 rounded-full text-sm text-gray-600">
                    查看详情
                </button>
                <button class="px-4 py-1.5 gradient-bg text-white rounded-full text-sm">
                    评价课程
                </button>
            </div>
        </div>
        
        <!-- 已取消状态卡片 -->
        <div class="bg-white rounded-xl shadow-sm overflow-hidden">
            <div class="p-4 border-b border-gray-100">
                <div class="flex justify-between items-center">
                    <div class="flex items-center">
                        <div class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center text-gray-400">
                            <i class="fa-solid fa-user-slash"></i>
                        </div>
                        <div class="ml-3">
                            <h3 class="font-medium">声音疗愈课程</h3>
                            <p class="text-xs text-gray-500">未匹配教练</p>
                        </div>
                    </div>
                    <div class="text-gray-500 text-sm font-medium">
                        已取消
                    </div>
                </div>
            </div>
            
            <div class="p-4">
                <div class="flex">
                    <div class="w-20 h-20 rounded-lg bg-gray-100 flex items-center justify-center text-gray-300">
                        <i class="fa-solid fa-image text-3xl"></i>
                    </div>
                    <div class="ml-3 flex-1">
                        <h3 class="font-medium mb-1">心灵疗愈冥想课程</h3>
                        <div class="text-xs text-gray-500 mb-2">单次 | 60分钟 | 减压放松</div>
                        <div class="flex justify-between">
                            <div class="text-xs text-gray-500">
                                预约已取消
                            </div>
                            <div class="text-gray-500 font-medium">
                                ¥250
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="bg-gray-50 p-4 flex justify-end space-x-3">
                <button class="px-4 py-1.5 border border-gray-300 rounded-full text-sm text-gray-600">
                    查看详情
                </button>
                <button class="px-4 py-1.5 gradient-bg text-white rounded-full text-sm">
                    重新预约
                </button>
            </div>
        </div>
    </main>
    
    <!-- 底部导航 -->
    <nav class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 py-1.5 z-20 max-w-md mx-auto">
        <div class="flex justify-around items-center">
            <a href="index.html" class="flex flex-col items-center w-1/5 text-gray-500">
                <i class="fa-solid fa-house text-xl mb-0.5"></i>
                <span class="text-xs">首页</span>
            </a>
            <a href="coach.html" class="flex flex-col items-center w-1/5 text-gray-500">
                <i class="fa-solid fa-user-tie text-xl mb-0.5"></i>
                <span class="text-xs">教练</span>
            </a>
            <a href="venue.html" class="flex flex-col items-center w-1/5 text-gray-500">
                <i class="fa-solid fa-building text-xl mb-0.5"></i>
                <span class="text-xs">空间</span>
            </a>
            <a href="#" class="flex flex-col items-center w-1/5 text-primary-dark">
                <i class="fa-solid fa-clipboard-list text-xl mb-0.5"></i>
                <span class="text-xs font-medium">服务</span>
            </a>
            <a href="my.html" class="flex flex-col items-center w-1/5 text-gray-500">
                <i class="fa-solid fa-user text-xl mb-0.5"></i>
                <span class="text-xs">我的</span>
            </a>
        </div>
    </nav>
    
    <script>
        // 更新选中的服务数量
        function updateSelectedCount() {
            const checkboxes = document.querySelectorAll('.service-checkbox:checked');
            const count = checkboxes.length;
            document.getElementById('selected-count').textContent = count;
            document.getElementById('batch-count').textContent = count;
            
            // 显示或隐藏批量邀请按钮
            if (count > 0) {
                document.getElementById('batch-invite').classList.remove('hidden');
            } else {
                document.getElementById('batch-invite').classList.add('hidden');
            }
        }
        
        // 切换标签
        function switchTab(tabId) {
            // 实际应用中这里会根据选中的标签显示不同的内容
            const tabs = document.querySelectorAll('.flex.overflow-x-auto > button');
            tabs.forEach((tab, index) => {
                tab.classList.remove('text-primary-dark', 'font-medium', 'border-b-2', 'border-primary-dark');
                tab.classList.add('text-gray-500');
                
                // 如果当前标签是目标标签，高亮它
                if (tab.textContent.trim().includes(getTabName(tabId))) {
                    tab.classList.remove('text-gray-500');
                    tab.classList.add('text-primary-dark', 'font-medium', 'border-b-2', 'border-primary-dark');
                }
            });
            
            // 这里可以添加代码来显示/隐藏相应的内容区域
            // 例如：显示待接受、待服务、已完成或已取消的预约服务
        }
        
        // 根据tabId获取对应的标签名
        function getTabName(tabId) {
            switch (tabId) {
                case 'all': return '全部';
                case 'waiting': return '待接受';
                case 'pending': return '待服务';
                case 'completed': return '已完成';
                case 'cancelled': return '已取消';
                default: return '全部';
            }
        }
        
        // 从URL参数中获取tab值
        function getTabFromURL() {
            const urlParams = new URLSearchParams(window.location.search);
            return urlParams.get('tab') || 'all';
        }
        
        // 页面加载完成后执行
        document.addEventListener('DOMContentLoaded', function() {
            // 根据URL参数切换到相应的标签
            const tabId = getTabFromURL();
            switchTab(tabId);
        });
    </script>
</body>
</html> 